
//http://canvas.migong.org/ canvas的一些动画效果教程

//获取一个2d上下文
function getContext2D(id) {
    var canvas = document.getElementById(id);
    if (canvas.getContext) {
        var context = canvas.getContext('2d');
        return context;
    }
}

var ctx = getContext2D('drawing');



ctx.strokeStyle = "#ff0000";//设置红色描边
ctx.lineWidth = 3; //描边的大小
ctx.lineCap = 'round';//控制线条末端形状平头、圆头还是方头（"butt"、"round"或"square"）

//x,y,w,h
ctx.strokeRect(0, 0, 400, 400); //设置描边之后 需要绘制描边才能显示

ctx.fillStyle = "#00ff00"; //填充颜色
//ctx.fillStyle = "#ff0000";
ctx.fillRect(50, 50, 100, 100); //填充同理才能显示

function draw(ctx, num) {
    //画出一个射击靶的四方形
    var stx = 50, sty = 50, stw = 100, sth = 100;
    var gap = 5;
    for (let i = 1; i <= num; i++) {
        let left = stx + gap * i;
        let top = sty + gap * i;
        let w = stw - gap * i * 2;
        let h = sth - gap * i * 2;
        if (i % 2 != 0) {
            ctx.clearRect(left, top, w, h); //先镂空某个区域
        } else {
            ctx.fillRect(left, top, w, h); //隔一小段距离再填充 画出一个环       
        }
    }
}
draw(ctx,10);
ctx.clearRect(50,50,100,100);
//绘制路径
var stAngle = 0;
var enAngle = 180;
ctx.strokeStyle = "#0000ff"; //设置路径的样式 
ctx.lineWidth = 1;
ctx.beginPath();
var centerX = 30;
var centerY = 100;
var radius = 30;
ctx.moveTo(centerX,centerY); //移动到某点
ctx.lineTo(centerX+radius,centerY);//链接到某点
//ctx.arc(centerX,centerY,radius,stAngle/180*Math.PI,enAngle/180*Math.PI,true); //该方法是绘制弧形,最后一个参数true表示逆时针画
var cx1 = centerX+radius*2;//控制点1的x坐标
var cy1 = centerY-30;//控制点1的y坐标
var cx2 = cx1+50;
ctx.lineTo(cx1,cy1);
ctx.lineTo(cx2,cy1);
ctx.moveTo(centerX+radius,centerY);
ctx.bezierCurveTo(cx1,cy1,cx2,cy1,200,200);//绘制贝塞尔曲线
ctx.lineTo(centerX,centerY);
ctx.rect(0,0,40,40); //绘制一个矩形路径
ctx.fill(); //填充所有绘制的路径 使用fillStyle
ctx.stroke();//必须手动调用描边方法才能显示绘制的路径
ctx.closePath(); 
//ctx.clip(); //在路径上创建一个剪切区域 调用该方法后 再调用fillText无效
if (ctx.isPointInPath(centerX,centerY)) {
    console.log("判断某个点是否在路径上");
}

//绘制文本
ctx.font = "bold 14px Arial";

ctx.textAlign = "center";
ctx.textBaseline = "middle";
//文本中心点的坐标是270,100 因为设置了 textAlign 是center textBaseline是middle
//如果分别设置为 start 和 top 则是文本的左上角坐标
ctx.fillText("Hello world",270,100); 
ctx.strokeText("37",20,20);//创建描边文本
var textMetrics = ctx.measureText("Hello world"); //根据当前格式获取文本的度量信息,目前只有width属性

console.log("textMetrics",textMetrics);

var image = document.images[0];
ctx.drawImage(image,10,10); //绘制就会马上出来 因为script标签在body之后

//绘制图像
var img = new Image();
img.addEventListener("load",onImgLoad);
img.src = 'imgs/2.png';
function onImgLoad(event) { //必须加载完才能绘制

    //ctx.drawImage(img,200,100);//完整绘制整个图像到200,100坐标处

    ctx.drawImage(image,100,0,50,50); //绘制完整图像到100,0坐标处 并且重设图像宽高

    //实现类似as3的BitmapData的copyPixels方法,可以通过传入9个参数
    /*
    要绘制的图像、源图像的x 坐标、源图像的y 坐标、源图像的宽度、源
    图像的高度、目标图像的x 坐标、目标图像的y 坐标、目标图像的宽度、目标图像的高度。
    
    */
    ctx.drawImage(image,50,30,30,30,200,200,30,30); //太难记得参数了

}

//设置阴影
ctx.shadowColor = "#ffff00"; //阴影颜色
var offset = 50
ctx.shadowOffsetX = offset; //偏移量
ctx.shadowOffsetY = offset;
ctx.shadowBlur = 0; //模糊

var ctx2 = CanvasUtil.stroke("drawing2",0,0,400,400,1,"#ff0000");
//渐变填充

var cvsGradient = ctx2.createLinearGradient(10,10,50,50); // 创建 CanvasGradient 渐变实例
cvsGradient.addColorStop(0,"#cccccc");
cvsGradient.addColorStop(1,"#ffff00"); //设置渐变的颜色
CanvasUtil.fillRect(ctx2,0,0,50,50,cvsGradient);

//模式 包括"repeat"、"repeat-x"、"repeat-y"和"no-repeat"。 
var pattern = ctx2.createPattern(image,'repeat');
CanvasUtil.fillRect(ctx2,50,50,200,200,pattern); //在该区域内重复显示图像

//使用图像数据
var imgData = ctx2.getImageData(50,50,65,65); //截取canva该区域生成图像数据
console.log(imgData);
/*
    width、height 和
    data。其中data 属性是一个数组，保存着图像中每一个像素的数据。在data 数组中，每一个像素用
    4 个元素来保存，分别表示红、绿、蓝和透明度值。因此，第一个像素的数据就保存在数组的第0 到第
    3 个元素中  
*/
ctx2.putImageData(imgData,300,300); //把图像数据显示在另外一个位置 相当于copy一份

//生成一个随机颜色点的图像
var myImgData = new ImageData(50,50);
function getRandomImg(myImgData) {
    var len = myImgData.data.length;
    for(let i = 0;i<len;i+=4){
        for(let j = 0;j<4;j++)
        {
            myImgData.data[i+j] = parseInt(Math.random()*255);
        }
        
    }
}

var tx = 50;
var ty = 260;
ctx2.font = "bold 20px Arial";
ctx2.fillStyle = "#ff0000";
ctx.textAlign = "start";
ctx2.textBaseline = "top";

var WIDTH = 400;
var HEIGHT = 400;
var gap = 5;
function drawImg() {
    ctx2.clearRect(tx,ty,myImgData.width,myImgData.height);
    tx = parseInt(gap + Math.random()*(WIDTH-myImgData.width-gap));
    ty = parseInt(gap + Math.random()*(WIDTH-myImgData.height-gap));
    getRandomImg(myImgData);
    ctx2.putImageData(myImgData,tx,ty);
    var code = parseInt(Math.random()*9999);
    ctx2.fillText(code,tx+2,ty+2);
}
//setInterval(drawImg,1000);

//合成(flash里面的混合模式) 462页 2017年12月29日18:08:21
//通过合成实现遮罩

ctx2.fillStyle = "#ff0000";
ctx2.fillRect(50,50,150,150);

ctx2.globalCompositeOperation = "source-in";//混合模式 两个图形重叠部分才可以见 整个canvas部分 只有在这个图形之后重叠的才可见
ctx2.beginPath();
ctx2.arc(125,125,30,0,2*Math.PI,true);
ctx2.fill();